<template>
	<view class="mymessage">
		<view class="message_cell" v-for="(item,index) in list" :key="item.id"
			@click="goPage(item.id,index,item.type,item.jump_id,item.appid)">
			<view v-if="item.msg_type==1" class="message_img_box">
				<image class="message_img" :src="onlinePic+'xiong.png'"></image>
				<view class="message_nums" v-if="item.is_read==0">1</view>
			</view>
			<view v-if="item.msg_type==2" class="message_img_box active_message_img_box">
				<image class="active_message_img" :src="onlinePic+'notice_icon.png'"></image>
				<view class="message_nums" v-if="item.is_read==0">1</view>
			</view>
			<view class="message_cell_right ml-10 flex-1">
				<view class="display_flex">
					<view class="f-w f-15 flex-1">{{item.msg_type_name}}</view>
					<view class="f-12 c-gray">{{item.created_at.substr(0,10)}}</view>
				</view>
				<view class="flex-1">
					<view class="ellipsis-2 f-13 c-999999">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="page_bottom_loading" :style="'padding-bottom:'+pdbottom+'rpx;'">{{loadingTitle}}</view>
	</view>
</template>

<script>
	import {
		getClubMyMessage,
		changeClubMsgRead
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				params: {
					page: 1,
					size: 10,
				},
				list: [],
				loadingTitle: '',
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
			};
		},
		onShow() {

		},
		onLoad() {
			this.getClubMyMessage()
			var params = {
				event_code: '我的消息',
				path: 'pages/my/mymessage',
				event_id: '',
				title: '',
				source_page: '',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			getClubMyMessage() {
				getClubMyMessage(this.params).then(res => {
					if (res.state == 1) {
						this.list = [...this.list, ...res.data.data]
						this.current_page = res.data.current_page
						this.last_page = res.data.last_page
						if (this.list.length == 0) {
							this.loadingTitle = "- 暂无更多 -"
						}
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			goPage(id, index, type, url, appid) {
				var params = {
					event_code: '我的消息',
					path: 'pages/my/mymessage',
					event_id: id,
					title: '',
					source_page: '点击消息跳转',
					value: '',
				}
				app.BurialPoint(params)
				changeClubMsgRead({
					id: id
				}).then(res => {
					if (res.state == 1) {
						this.list[index].is_read = 1
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
				if (type == 1 || type == 3) {
					uni.navigateTo({
						url: url
					})
				} else if (type == 2) {
					uni.navigateToMiniProgram({
						appId: appid,
						path: url,
						success(res) {
							// 打开成功
						}
					})
				}

			}
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.list = []
			this.getClubMyMessage()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.current_page < this.last_page) {
				this.showLoading = true
				this.params.page = this.params.page + 1
				this.getClubMyMessage()
			} else {
				this.showLoading = false
				if (this.list.length > 0) {
					this.loadingTitle = "- 已经到底了 -"
				} else {
					this.loadingTitle = "- 暂无更多 -"
				}

			}
		},
	}
</script>

<style lang="scss">
	.mymessage {

		.message_cell {
			padding: 30rpx;
			display: flex;
			align-items: flex-start;

			.active_message_img_box {
				background-color: #EFEFEF;
			}

			.message_img_box {
				width: 90rpx;
				height: 90rpx;
				position: relative;
				border-radius: 80rpx;
				border: 2rpx solid #E9E9E9;
				display: flex;
				align-items: center;
				justify-content: center;

				.message_img {
					width: 40rpx;
					height: 76rpx;
				}

				.active_message_img {
					width: 40rpx;
					height: 40rpx;
				}

				.message_nums {
					color: #ffffff;
					width: 28rpx;
					height: 28rpx;
					font-size: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					right: 0;
					top: 0;
					border-radius: 100rpx;
					background-color: #F84949;
				}
			}

			.message_cell_right {
				padding: 0 0 50rpx 0;
				border-bottom: 1rpx solid #E9E9E9;
			}

		}
	}
</style>